<template>
  <div class="service-card-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="万能卡专区"
      left-arrow
      @click-left="handleGoBack"
    >
      <!-- 左上角定位信息 -->
      <template #left>
        <div class="nav-left">
          <van-icon name="arrow-left" @click="handleGoBack" />
          <div class="location-info" @click="showLocationPicker">
            <van-icon name="location-o" size="14" />
            <span class="location-text">{{ currentLocation }}</span>
            <van-icon name="arrow-down" size="12" />
          </div>
        </div>
      </template>
    </van-nav-bar>

    <!-- 区域选择与标签栏 -->
    <div class="header-area">
      <div class="area-info">
        <van-tag type="primary" size="medium">{{ currentDistrict }}</van-tag>
        <span class="service-count">共{{ totalServices }}项服务</span>
      </div>
      <van-tabs :active="activeTab" @update:active="activeTab = $event" class="tab-container">
        <van-tab title="空调清洗特惠卡"></van-tab>
        <van-tab title="油烟机清洗特惠卡"></van-tab>
        <van-tab title="家电清洗随心搭"></van-tab>
      </van-tabs>
    </div>

    <!-- 横幅广告 -->
    <van-image
      src="https://picsum.photos/800/200?random=1"
      fit="cover"
      class="banner-img"
    />

    <!-- 服务列表-根据激活标签切换内容 -->
    <div class="service-list">
      <!-- 空调清洗特惠卡 -->
      <div v-if="activeTab === 0" class="service-cards-container">
        <div
          v-for="(item, index) in acServiceList"
          :key="index"
          class="service-card"
          @click="selectService(item)"
        >
          <div class="card-header">
            <div class="service-image">
              <van-image :src="item.img" fit="cover" />
              <div class="discount-badge" v-if="item.savePrice">
                <span>立省{{ item.savePrice }}元</span>
              </div>
            </div>
            <div class="service-info">
              <h3 class="service-title">{{ item.title }}</h3>
              <p class="service-desc">{{ item.desc }}</p>
              <div class="tags-group">
                <van-tag 
                  v-for="tag in item.tags" 
                  :key="tag" 
                  type="primary" 
                  size="small"
                  class="service-tag"
                >{{ tag }}</van-tag>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="price-section">
              <span class="current-price">¥{{ item.price }}</span>
              <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
            </div>
            <van-button 
              type="primary" 
              size="small" 
              round
              class="buy-button"
              @click.stop="buyService(item)"
            >
              立即购买
            </van-button>
          </div>
        </div>
      </div>

      <!-- 油烟机清洗特惠卡 -->
      <div v-else-if="activeTab === 1" class="service-cards-container">
        <div
          v-for="(item, index) in rangeServiceList"
          :key="index"
          class="service-card"
          @click="selectService(item)"
        >
          <div class="card-header">
            <div class="service-image">
              <van-image :src="item.img" fit="cover" />
              <div class="discount-badge" v-if="item.savePrice">
                <span>立省{{ item.savePrice }}元</span>
              </div>
            </div>
            <div class="service-info">
              <h3 class="service-title">{{ item.title }}</h3>
              <p class="service-desc">{{ item.desc }}</p>
              <div class="tags-group">
                <van-tag 
                  v-for="tag in item.tags" 
                  :key="tag" 
                  type="primary" 
                  size="small"
                  class="service-tag"
                >{{ tag }}</van-tag>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="price-section">
              <span class="current-price">¥{{ item.price }}</span>
              <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
            </div>
            <van-button 
              type="primary" 
              size="small" 
              round
              class="buy-button"
              @click.stop="buyService(item)"
            >
              立即购买
            </van-button>
          </div>
        </div>
      </div>

      <!-- 家电清洗随心搭 -->
      <div v-else class="service-cards-container">
        <div
          v-for="(item, index) in mixServiceList"
          :key="index"
          class="service-card"
          @click="selectService(item)"
        >
          <div class="card-header">
            <div class="service-image">
              <van-image :src="item.img" fit="cover" />
              <div class="discount-badge" v-if="item.savePrice">
                <span>立省{{ item.savePrice }}元</span>
              </div>
            </div>
            <div class="service-info">
              <h3 class="service-title">{{ item.title }}</h3>
              <p class="service-desc">{{ item.desc }}</p>
              <div class="tags-group">
                <van-tag 
                  v-for="tag in item.tags" 
                  :key="tag" 
                  type="primary" 
                  size="small"
                  class="service-tag"
                >{{ tag }}</van-tag>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="price-section">
              <span class="current-price">{{ typeof item.price === 'string' ? item.price : `¥${item.price}` }}</span>
              <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
            </div>
            <van-button 
              type="primary" 
              size="small" 
              round
              class="buy-button"
              @click.stop="buyService(item)"
            >
              {{ typeof item.price === 'string' ? '立即咨询' : '立即购买' }}
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <van-button icon="share-o" type="default">分享</van-button>
      <van-button icon="card-o" type="default">我的服务卡</van-button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { 
  NavBar, Tag, Tabs, Tab, Image, Cell, CellGroup, Button, Icon
} from 'vant';

export default {
  components: {
    VanNavBar,
    VanTag,
    VanTabs,
    VanTab,
    VanImage,
    VanCell,
    VanCellGroup,
    VanButton,
    VanIcon,
  },
  setup() {
    // 激活的标签页索引
    const activeTab = ref(0);
    
    // 定位信息
    const currentLocation = ref('江西南昌');
    const currentDistrict = ref('青山湖区');
    
    // 计算总服务数量
    const totalServices = computed(() => {
      if (activeTab.value === 0) return acServiceList.value.length;
      if (activeTab.value === 1) return rangeServiceList.value.length;
      return mixServiceList.value.length;
    });

    // 空调清洗服务列表数据
    const acServiceList = ref([
      {
        title: '2台挂式空调卡',
        desc: '专业清洗工具 高温杀菌消毒',
        img: 'https://picsum.photos/100/100?random=2',
        price: 138,
        originalPrice: 170,
        savePrice: 32,
        tags: ['杀菌消毒', '拆机清洗']
      },
      {
        title: '3台挂式空调卡',
        desc: '清洗效果看得见 吹出健康风',
        img: 'https://picsum.photos/100/100?random=3',
        price: 204,
        originalPrice: 255,
        savePrice: 51,
        tags: ['杀菌消毒', '专业拆卸']
      },
      {
        title: '挂机+柜机空调清洗卡',
        desc: '全方位环境保护 深度清洗还你清新空气',
        img: 'https://picsum.photos/100/100?random=4',
        price: 206,
        originalPrice: 243,
        savePrice: 37,
        tags: ['清爽抑菌', '高温清洗']
      },
      {
        title: '任选3台空调',
        desc: '改善家庭空气质量 减少空调耗电量',
        img: 'https://picsum.photos/100/100?random=5',
        price: 398,
        originalPrice: 504,
        savePrice: 106,
        tags: ['清新空气', '预防空调病']
      },
      {
        title: '任选4台空调',
        desc: '全方位环境保护 还你清新空气',
        img: 'https://picsum.photos/100/100?random=6',
        price: 508,
        originalPrice: 672,
        savePrice: 164,
        tags: ['健康升级', '自带工具']
      },
      {
        title: '3台中央空调',
        desc: '有效清除灰尘 预防空调病',
        img: 'https://picsum.photos/100/100?random=7',
        price: 398,
        originalPrice: 444,
        savePrice: 46,
        tags: ['消毒杀菌', '洁净如新']
      },
      {
        title: '4台中央空调',
        desc: '专用清洗吸尘器 强吸力除尘效果佳',
        img: 'https://picsum.photos/100/100?random=8',
        price: 508,
        originalPrice: 592,
        savePrice: 84,
        tags: ['上门不加价', '洁净焕新']
      }
    ]);

    // 油烟机清洗服务列表（示例数据）
    const rangeServiceList = ref([
      {
        title: '油烟机深度清洗卡',
        desc: '专业拆卸清洗 去除顽固油污',
        img: 'https://picsum.photos/100/100?random=9',
        price: 158,
        originalPrice: 198,
        savePrice: 40,
        tags: ['深度清洗', '高温去油']
      },
      {
        title: '油烟机+灶台清洗卡',
        desc: '全方位清洁 厨房焕然一新',
        img: 'https://picsum.photos/100/100?random=10',
        price: 228,
        originalPrice: 288,
        savePrice: 60,
        tags: ['整体清洁', '快速去油']
      }
    ]);

    // 家电清洗随心搭列表（示例数据）
    const mixServiceList = ref([
      {
        title: '空调+油烟机清洗卡',
        desc: '组合优惠 家庭清洁一步到位',
        img: 'https://picsum.photos/100/100?random=11',
        price: 328,
        originalPrice: 396,
        savePrice: 68,
        tags: ['组合优惠', '高效清洁']
      },
      {
        title: '多家电随心搭清洗卡',
        desc: '自由组合 满足多样需求',
        img: 'https://picsum.photos/100/100?random=12',
        price: '按需计算',
        originalPrice: '',
        savePrice: '',
        tags: ['自由组合', '灵活定制']
      }
    ]);

    // 返回上一页逻辑
    const handleGoBack = () => {
      history.back();
    };

    // 显示定位选择器
    const showLocationPicker = () => {
      console.log('显示定位选择器');
      // 这里可以添加定位选择逻辑
    };

    // 选择服务
    const selectService = (item) => {
      console.log('选择服务:', item);
    };

    // 购买服务
    const buyService = (item) => {
      console.log('购买服务:', item);
      // 这里可以添加购买逻辑
    };

    return {
      activeTab,
      currentLocation,
      currentDistrict,
      totalServices,
      acServiceList,
      rangeServiceList,
      mixServiceList,
      handleGoBack,
      showLocationPicker,
      selectService,
      buyService
    };
  }
};
</script>

<style scoped>
.service-card-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.location-info:hover {
  background: rgba(255, 255, 255, 0.3);
}

.location-text {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

/* 头部区域样式 */
.header-area {
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
  box-shadow: 0 2px 12px rgba(255, 107, 53, 0.3);
}

.area-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.service-count {
  color: #fff;
  font-size: 12px;
  opacity: 0.9;
}

.tab-container {
  margin-top: 8px;
}

/* 标签栏样式定制 */
.van-tabs--line {
  --tabs-nav-background-color: transparent;
  --tabs-inactive-text-color: rgba(255, 255, 255, 0.7);
  --tabs-active-text-color: #fff;
  --tabs-line-height: 3px;
  --tabs-line-color: #fff;
}

/* 横幅图片 */
.banner-img {
  width: 100%;
  height: auto;
  border-radius: 0 0 16px 16px;
}

/* 服务列表容器 */
.service-list {
  padding: 16px;
}

.service-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 服务卡片样式 */
.service-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: #ff6b35;
}

.card-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.service-image {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.service-image .van-image {
  width: 100%;
  height: 100%;
}

.discount-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.service-info {
  flex: 1;
  min-width: 0;
}

.service-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.service-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.tags-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.service-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  color: white !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.current-price {
  font-size: 20px;
  color: #ff4757;
  font-weight: 700;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.buy-button {
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
  font-weight: 600 !important;
  min-width: 80px !important;
}

.buy-button:hover {
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* 底部栏样式 */
.bottom-bar {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

.bottom-bar .van-button {
  flex: 1;
  margin: 0 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .service-card {
    padding: 12px;
  }
  
  .card-header {
    gap: 10px;
  }
  
  .service-image {
    width: 70px;
    height: 70px;
  }
  
  .service-title {
    font-size: 15px;
  }
  
  .service-desc {
    font-size: 12px;
  }
  
  .current-price {
    font-size: 18px;
  }
}
</style>